import React from 'react';
import "./index.less";
import {PlusOutlined} from "@ant-design/icons";
import {KfRapidUploadProps} from "kf-web-library";
import KfMaterialRapidUpload from "@/components/KfMaterialUpload/KfMaterialRapidUpload";
import {MaterialType} from "@/components";


export interface KfMaterialAvatarUploadProps extends Omit<KfRapidUploadProps, 'showUploadList' | 'maxCount' | 'uploadButton' | 'listType'> {
    value?: string,
    materialType: MaterialType,
    listType?: "picture-card" | "picture-circle",
}


const KfMaterialAvatarUpload: React.FC<KfMaterialAvatarUploadProps> = (props) => {

    const {value: avatarUrl,listType= "picture-card", ...rapidUploadProps} = props;

    const uploadButton = !!avatarUrl ? null : (
        <div>
            <PlusOutlined/>
            <div className="ant-upload-text">上传</div>
        </div>
    );

    console.log("uploadButton",  uploadButton)

    return (
      <KfMaterialRapidUpload
        {...rapidUploadProps}
        value={avatarUrl}
        maxCount={1}
        className={'kf-avatar-uploader'}
        listType={listType}
        showUploadList={true}
        triggerElement={uploadButton}
      >
        {
          //!!avatarUrl && <img src={avatarUrl} alt="avatar" style={{width: '100%'}}/>
        }
      </KfMaterialRapidUpload>
    );
};

export default KfMaterialAvatarUpload;
